import React,{useRef,useEffect} from 'react';
import * as echarts from 'echarts';
import {get} from "../../../service";
import ChinaJson from '../../../assets/geoJson/china.json'
function MapChart(props) {
    const ref =useRef()
    useEffect(()=>{
        echarts.registerMap('china',ChinaJson)//注册中国地图
        const echart= echarts.init(ref.current)
        const options = {
            //视觉映射
            visualMap:{
                show:false,
                dimensions:'value',
                min:1000,
                max:10000,
                inRange:{
                    color:['#ffd768','#7f1100'],//设置颜色
                    symbolSize:[8,16]//设置图标大小
                },
                outOfRange:{
                    color:'red' //超出范围
                }
            },
            //地理坐标
            geo:{
                show: true,
                map:'china',
                zoom:1.6,
                top:100,
                itemStyle:{
                    areaColor:'#84bada',
                    borderColor:'#fff',
                    borderWidth:0.5
                },
                emphasis:{
                    itemStyle:{
                        areaColor:'#84bada',
                        opacity:0.6
                    },
                }
            },
            tooltip:{
                show:true
            },
            series:[
                {
                    type:'scatter',//饼图
                    coordinateSystem:'geo',//半径
                    encode:{
                        lng:'lng',
                        lat:'lat',
                        tooltip: ['name','value']
                    }
                }
            ]
        }
        echart.setOption(options)
        window.addEventListener('resize',()=>{
            echart.resize()
        })
        get('/api/overview/mapsales').then(res=>{
            echart.setOption({
                dataset:{
                    //定义维度
                    dimensions:['name','lng','lat','value'],
                    source:res.records
                }
            })
        })
    },[])
    return (
        <div ref={ref} style={{height:'100%'}}></div>
    );
}

export default MapChart;